<template>
  <div class="box_main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: center; padding: 3px 0" type="text">用户登录</el-button>
      </div>
      <el-form :model="form" style="margin-left: 80px">
        <el-col :span="17">
          <el-form-item label="用户名：">
            <input width="120px" v-model="form.staffName" />
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="密    码：">
            <input width="120px" type="password" v-model="form.staffPwd" @keyup.enter="handleEnter" />
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="验证码:" prop="checkCode">
            <el-input v-model="form.checkCode" @keyup.enter="handleEnter" style="width: 100px"></el-input>
            <el-tag type="danger" style="font-size: 14pt; cursor: pointer" @click="createCode">{{ madeCode }}</el-tag>
            <el-link @click="createCode" type="primary">换一个</el-link>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item>
            <el-button type="primary" @click="submithandle">登录</el-button>
            <el-button type="info" @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getChildrenPath } from "@/router/indexUtil";
import { login, getleftmenu } from "@/api/user/login.js";

export default {
  data() {
    return {
      isShow: true,
      form: {
        staffName: "111",
        staffPwd: "111",
        checkCode: "",
      },
      //生成的验证码
      madeCode: "6666",
      connection: null,
      msgs: [],
      dataInfo: "",
    };
  },
  mounted() {

    // this.getClientHeight();
    // this.getScrollTop();
  },
  methods: {
    handleEnter() {
      this.submithandle();
      console.log("enter");
    },
    submithandle() {
      if (
        this.form.checkCode.toLowerCase() !=
        this.madeCode.toLowerCase()
      ) {
        this.$message.error("验证码错误");
        return;
      }
      this.isShow = false; // 通过验证后，需要手动隐藏模态框
      login(this.form).then((res) => {
        console.log(res);
        if (res.data.data == null) {
          this.$message({
            message: "账户名或密码错误",
            type: "error",
            showClose: true,
          });
          return;
        } else {
          localStorage.setItem("userId", res.data.data.id);
          sessionStorage.setItem("encode", res.data.data.encode);
          localStorage.setItem("username", res.data.data.staffName);
          localStorage.setItem("accountToken", res.data.accountToken); // 登录成功后将token存储在localStorage中
          var ids = {
            Id: res.data.data.id,
          };
          //console.log(ids)
          getleftmenu(ids).then((res) => {
            this.$store.state.menulist = res.data.data;
            getChildrenPath("");
            this.$router.push("/defaultpage");
          });


        }
      });
    },
    reset() {
      this.form = {};
    },
    createCode() {
      //生成4位验证码
      let code =
        "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      this.madeCode = ""; //先清空结果
      for (let i = 0; i < 4; i++) {
        let index = Math.floor(code.length * Math.random()); //floor:向下取整  random:随机数  >=0 <1
        this.madeCode += code[index];
      }
    },

  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin: 16% 36%;
  top: 10%;
  left: 50%;
}

* {
  margin: 0px;
  padding: 0px;
}

.box_main {
  position: absolute;
  width: 100%;
  height: 923px;
  background-image: url(/static/pmsbg.webp);
  /* background-size: 100%; */
  background-repeat: no-repeat;
}
</style>